import { useState } from 'react'
import { nanoid } from 'nanoid';

function Todo() {
    // task输入框
    let [todo, setTodo] = useState('')
    // listitem
    let [list, setList] = useState([])
    let [done, setDone] = useState(false)
    let [show, setShow] = useState(false)

    // 添加item
    let confirm = () => {
        if (!todo.trim()) return
        setList([...list, { id: nanoid(), task: todo, done: false }])
        setTodo('')
    }
    // 回车添加item
    let addByEnter = e => {
        if (e.keyCode === 13) {
            confirm()
        }
    }

    // 删除item
    let delTodo = (id) => {
        setList(list.filter(ele => ele.id != id))
    }

    return (
        <div>
            {/* 头部 */}
            Task  <input type="text" value={todo} onChange={e => setTodo(e.target.value)} onKeyUp={e => addByEnter(e)} />
            <button onClick={confirm}>√</button>

            {/* 表单 */}
            <div>
                {
                    list.map(item => (
                        <div onMouseEnter={() => setShow(_ => ({ show: _.show }))} onMouseLeave={() => setShow(_ => ({ show: !_.show }))}>
                            {/* done */}
                            <checkbox></checkbox>
                            <span >{item.task}</span>
                            <button onClick={() => delTodo(item.id)} style={{ display: (show ? 'block' : 'none') }}>x</button>
                        </div>
                    ))
                }
            </div>

        </div>
    )
}

export default Todo